<!--
 * @Description: 我的页面
 * @Author: Kerwin
 * @Date: 2025-03-31 10:44:37
 * @LastEditTime: 2025-07-15 14:54:11
 * @LastEditors:  Please set LastEditors
-->

<template>
    <view class="myBox">
        <scroll-view scroll-y>
            <view class="topBox">
                <view class="header">
                    <view class="title" @click="showMenu">
                        <u-icon size="46" name="list-dot"></u-icon>
                    </view>
                    <view class="setting" @click="goSetting"><van-icon name="setting-o" size="24" /></view>
                </view>
                <view class="headerMes">
                    <view class="avatar">
                        <!-- <u-image :src="userDetailInfo?.avatar" width="120rpx" height="120rpx" shape="circle"></u-image> -->
                        <u-avatar :src="getImgFullPath(userDetailInfo?.avatar)" style="width:120rpx; height:120rpx; " ></u-avatar>
                    </view>
                    <view class="avatarInfo">
                        <view> {{ userDetailInfo?.nickname }}</view>
                        <view class="tags">
                            <scroll-view class="scroll-view_H" scroll-x="true">
                                <view class="tag-row">
                                    <u-tag v-for="(item, index) in userDetailInfo?.roles" :key="index" mode="plain"
                                        :text="item.name" />

                                </view>

                            </scroll-view>
                        </view>
                    </view>
                </view>

            </view>

            <view class="main">
   
                <view class="card">
                    <u-cell-group :border="false">
                        <u-cell-item @click="gotoOrder" title="商城订单" style="font-weight: 700; color: #000;"></u-cell-item>
                    </u-cell-group>
                    <hyGrid :gridItems="gridConfig" :col="4"></hyGrid>
                </view>
                <view class="card2">
                    <u-cell-group :border="false">
                        <u-cell-item @click="gotoQueue" title="我的排队" style="font-weight: 700; color: #000;"></u-cell-item>
                    </u-cell-group>
                    <hyGrid :gridItems="soreConfig" :col="4"></hyGrid>
                </view>
                <MyBdManage></MyBdManage>
  
                <!-- <view class="card3">
                    <u-cell-group :border="false">
                        <u-cell-item title="酒慕网链动" style="font-weight: 700; color: #000;"></u-cell-item>
                    </u-cell-group>
                    <hyGrid :gridItems="ldConfig" :col="4"></hyGrid>
                </view> -->
            </view>

            <view class="footer">
                <hyGrid :gridItems="footerConfig" :col="4"></hyGrid>
                <u-button v-if="isShop" @click="changeRole" style="margin-top: 40rpx;" type="primary">切换为 {{ changUserOrShop ? '用户' : '商户' }} 模式</u-button>
            </view>
            <c_menu ref="menuRef" />

        </scroll-view>




        <hy-tabbar bgColor="#fff"></hy-tabbar>
    </view>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import {
    onLoad,
    onShow,
    onPageScroll,
    onShareAppMessage,
    onPullDownRefresh
} from '@dcloudio/uni-app'
import { storeToRefs } from 'pinia'
//组件
import hyGrid from './components/hy-grid.vue';
import c_menu from '../mine/c_menu.vue'
import  MyBdManage  from '@/packageA/pages/myBdManage/index.vue'
//api
import { productApi, userApi, socialApi } from '@/api'
//其他
import { getImgFullPath,} from '@/utils/index'
import { useUserStore, useConfigStore } from '@/store'


//#region ************************************************** hyGrid初始化数据 **************************************************/
//商城订单卡片配置
const gridConfig = ref<any>([
    { icon: 'balance-pay', text: '待支付', size: 26, onClick: () => gotoOrder(1), iconLibrary: 'vant', },
    { icon: 'clock', text: '待发货', size: 46, onClick: () => gotoOrder(2), iconLibrary: 'uview' },
    { icon: 'car', text: '待收货', size: 46, onClick: () => gotoOrder(3), iconLibrary: 'uview' },
    { icon: 'completed', text: '已完成', size: 26, onClick: () =>  gotoOrder(4), iconLibrary: 'vant' }
]);
//我的排队卡片配置
const soreConfig = ref<any>([
    { icon: 'home-o', text: '全部', size: 26, onClick: () => gotoQueue(0), iconLibrary: 'vant' },
    { icon: 'friends-o', text: '排队中', size: 26, onClick: () => gotoQueue(1), iconLibrary: 'vant' },
    { icon: 'completed', text: '已完成', size: 26, onClick: () => gotoQueue(3), iconLibrary: 'vant' },
    { icon: 'exchange', text: '积分兑换', size: 26, onClick: () => gotoIntegral(), iconLibrary: 'vant' }
]);
// 链动卡片配置
const ldConfig = ref<any>([
    { icon: 'qr', text: '新都码', size: 26, onClick: () => console.log('待支付'), iconLibrary: 'vant' },
    { icon: 'share', text: '新都推广', size: 46, onClick: () => console.log(''), iconLibrary: 'uview' },
    { icon: 'qr', text: '青白江码', size: 26, onClick: () => console.log('待收货'), iconLibrary: 'vant' },
    { icon: 'share', text: '青白江推广', size: 46, onClick: () => console.log(''), iconLibrary: 'uview' },
    { icon: 'qr', text: '米集青羊码', size: 26, onClick: () => console.log('待收货'), iconLibrary: 'vant' },
    { icon: 'share', text: '米集青羊推广', size: 46, onClick: () => console.log('已完成'), iconLibrary: 'uview' }
]);
// 底部卡片配置
const footerConfig = ref<any>([
    { icon: 'star-o', text: '收藏', size: 26, onClick: () => console.log('待支付'), iconLibrary: 'vant' },
    { icon: 'shop-o', text: '我的店铺', size: 26, onClick: () => console.log(''), iconLibrary: 'vant' },
    { icon: 'qr', text: '我的分享码', size: 26, onClick: () => console.log('待收货'), iconLibrary: 'vant' },
    { icon: 'share', text: '我的推广', size: 46, onClick: () => console.log(''), iconLibrary: 'uview' },
    { icon: 'shop-o', text: '花了还有入驻', size: 26, onClick: () => console.log(''), iconLibrary: 'vant' },
    { icon: 'shop-o', text: '鑫复来入驻', size: 26, onClick: () => console.log(''), iconLibrary: 'vant' },
    { icon: 'shop-o', text: '长来入驻', size: 26, onClick: () => console.log(''), iconLibrary: 'vant' },
]);

//#endregion

//#region **************************************************  初始化数据 **************************************************/
const userStore = useUserStore()
const configStore = useConfigStore()
const { hasLogin, userInfo } = storeToRefs(userStore)
const userId = ref(userInfo.value?.id)
const userDetailInfo = ref()
// 弹出侧边菜单
const menuRef = ref()
//全部店铺
const shopListAll = ref([])
const isShop = ref(false) //是否是商户
//切换模式
const changUserOrShop = ref(false)   //false为用户模式，true为商户模式
const showMenuStatus = ref(false)
const showMenu = () => {
    console.log('showMenu',showMenuStatus.value);
    
    showMenuStatus.value = !showMenuStatus.value
    if (showMenuStatus.value) {
        menuRef.value.open(changUserOrShop.value)
    }
}
//#endregion

//#region **************************************************  处理数据 **************************************************/
onLoad(() => {
    // getUserDetailInfo()
    shopList()
})
onShow(() => {
    getUserDetailInfo()
})

//获取用户数据
const getUserDetailInfo = async () => {
    const { data } = await userApi.userInfo()
    console.log('用户数据', data);
    if (data) {
        userDetailInfo.value = data
    } else {
        userDetailInfo.value = {}
    }
}
//跳转到设置
const goSetting = () => {
    uni.navigateTo({
        url: '/pages/my/setting'
    })
}

//切换为商户（用户）模式
const changeRole = () => {
    changUserOrShop.value = !changUserOrShop.value
    console.log('切换模式',changUserOrShop.value);
    

}

//查询是否是商户
const shopList = async () => {
    const { data } = await productApi.getShopList({
        detail: 'true',
        shopType: 3,
        managerUserId: userId.value,
    })
    shopListAll.value = data.records //全部店铺
    //判断是否是商户
    if (data.records && data.records.length > 0) {
        isShop.value = data.records.some((e: any) => {
            return e.status == 20 || e.status == 21
        })
    }



}

///#region **************************************************  商城订单 **************************************************/
const gotoOrder = (id?:any) =>{
    console.log(1111,'跳转');
    uni.navigateTo({
        url: `/packageB/pages/order/index?id=${id}`
    })
    
}
//#endregion
///#region **************************************************   排队 **************************************************/
const gotoQueue = (id?:any) =>{
    console.log(1111,'跳转');
    uni.navigateTo({
        url: `/packageB/pages/queue/index?id=${id}`
    })
    
}
//#endregion
///#region **************************************************  积分兑换  **************************************************/
const gotoIntegral = () =>{
    console.log(1111,'跳转');
    uni.navigateTo({
        url: `/packageB/pages/integral/index`
    })
    
}
//#endregion

</script>

<style lang="scss" scoped>
.myBox {}

.topBox {

    padding: 0 30rpx;
    background: linear-gradient(to bottom, #fe8844, #ffe4c4);
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 130rpx;
    font-size: 28rpx;
    color: #fff;
    /* padding-bottom: 36rpx; */
    /* background-color: #fe8c4d; */
}

.headerMes {
    display: flex;
    height: 220rpx;
    // background-color: pink;

    .avatarInfo {
        margin-left: 40rpx;
        font-size: 32rpx;
        color: #fff;
    }

    .tags {
        margin-top: 10rpx;
        width: 750rpx;

        .scroll-view_H {
            white-space: nowrap;
            width: 70%;
            overflow-x: auto;
            /* 确保水平滚动 */
        }

        .scroll-view_H .tag-row {
            display: inline-block;
            margin-right: 10rpx;
            /* 根据需要调整间距 */
        }

        .scroll-view_H .tag-row u-tag {
            display: inline-block;
            margin-right: 10rpx;
            /* 根据需要调整间距 */
        }
    }
}


.main {

    padding: 30rpx;

    .card {
        position: absolute;
        top: 280rpx;

        left: 4%;
        width: 92%;
        // background-color: #fff;
        // border-radius: 20%;
    }

    :deep(.u-cell-item-box) {
        border-top-left-radius: 20rpx;
        border-top-right-radius: 20rpx;
        // background-color: pink;
    }

    .card2 {
        margin-top: 180rpx;
        margin-bottom: 40rpx;
    
    }

    .card3 {
        margin: 30rpx 0;
    }


}

.footer {
    padding: 0 30rpx;
    margin-bottom: 150rpx;
}

:deep(.u-size-default) {
    margin-right: 10rpx;
}
</style>